Skip to content

feat: add My Account button block to all header patterns#404

Merged
laurelfulford merged 12 commits into
trunkfrom
feat/my-account-button-to-patterns
Feb 2, 2026
Merged

feat: add My Account button block to all header patterns#404
laurelfulford merged 12 commits into
trunkfrom
feat/my-account-button-to-patterns

Conversation

@laurelfulford
Copy link
Copy Markdown
Contributor

@laurelfulford laurelfulford commented Jan 30, 2026

All Submissions:

Changes proposed in this Pull Request:

This PR adds the My Account Button block (with a conditional check) to all the header patterns bundled with the Newspack theme (excluding mobile layout 2 -- I just couldn't make it work nicely with the size of the button).

Open questions/comments:

  • This is kind of an open question from the original PR, but the My Account Button looks the same on desktop or mobile - do we want to do anything special for mobile (like have a style that hides the text)?
  • There is a weird couple-pixel mismatch in alignment in a couple of the mobile header layouts where the Donate Block is right next to the My Account button block. This is due to the icon -- in my testing, tweaking this style to use 1.45em as the smaller size fixed it, but I'm not sure if/how we'd want to do something like that (just target the x-small CSS class? Just target the editor? Leave it since the front-end is fine?) so I left it for now.

See NPPD-1177.

How to test the changes in this Pull Request:

  1. Apply the PR.
  2. Navigate to the Site Editor > Patterns, and pick one of the Header patterns (Desktop or Mobile).
  3. With the outer container selected, pick the Template Patterns tab on the right sidebar, and in the Design panel, go through the pattern options one by one to review in the editor, and then on the front-end. Confirm that the appearance/order/spacing/etc. makes sense:

Desktop:
Pattern 1:
CleanShot 2026-01-30 at 11 44 04

Pattern 2:
CleanShot 2026-01-30 at 11 46 57

Pattern 3:
CleanShot 2026-01-30 at 11 50 51

Pattern 4:
CleanShot 2026-01-30 at 11 52 21

Pattern 5:
CleanShot 2026-01-30 at 11 54 14

Mobile:
Pattern 1:
CleanShot 2026-01-30 at 11 58 00

Pattern 3:
CleanShot 2026-01-30 at 12 01 36

  1. Review the code and confirm that each My Account button is wrapped in a check to make sure RAS is enabled.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@laurelfulford laurelfulford requested a review from a team as a code owner January 30, 2026 20:15
@laurelfulford
Copy link
Copy Markdown
Contributor Author

laurelfulford commented Jan 30, 2026

@thomasguillot I'd appreciate your eyes on this one, mostly to make sure I haven't committed a crime! 🙂

@thomasguillot
Copy link
Copy Markdown
Contributor

thomasguillot commented Feb 2, 2026

Thank you @laurelfulford. I've just changed the button's colours. Otherwise it looks 👍

@thomasguillot
Copy link
Copy Markdown
Contributor

thomasguillot commented Feb 2, 2026

Not part of this PR but I'd like to get your thoughts on this:

It just crossed my mind that I missed something during the block review...

e.g.

image

I think we need some toggles in a "Display" panel (kind of like the Navigation block):

  • Show icon (on by default) (cannot be off is label is off)
  • Show label (on by default) (cannot be off is icon is off)

And we need some aria-labels (in case it's just the icon)

@thomasguillot thomasguillot self-requested a review February 2, 2026 13:10
@laurelfulford
Copy link
Copy Markdown
Contributor Author

laurelfulford commented Feb 2, 2026

Thanks @thomasguillot!

I think we need some toggles in a "Display" panel (kind of like the Navigation block)...

This sounds like a good approach! I didn't even think about turning the icon off but that would be a handy option (and one of those things that's likely to get asked for!).

With that change, I'll spin up a second block theme PR to update the mobile patterns to use the icon-only option.

@laurelfulford laurelfulford merged commit d7b8b4a into trunk Feb 2, 2026
6 checks passed
@laurelfulford laurelfulford deleted the feat/my-account-button-to-patterns branch February 2, 2026 17:22
@laurelfulford
Copy link
Copy Markdown
Contributor Author

laurelfulford commented Feb 2, 2026

PR's added here for the icon toggle! Automattic/newspack-plugin#4443

matticbot pushed a commit that referenced this pull request Feb 5, 2026
@semantic-release-bot
chore(release): 1.24.0-alpha.1 [skip ci]
dc67923 
# [1.24.0-alpha.1](v1.23.0...v1.24.0-alpha.1) (2026-02-05)

### Bug Fixes

* dequeue some Woo styles from the theme ([#401](#401)) ([821f81c](821f81c))
* update single post template widths ([#407](#407)) ([a99b2cf](a99b2cf))

### Features

* Add My Account button block  ([#400](#400)) ([7c99f35](7c99f35))
* add My Account button block to all header patterns ([#404](#404)) ([d7b8b4a](d7b8b4a))
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Feb 5, 2026

🎉 This PR is included in version 1.24.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Feb 16, 2026
@semantic-release-bot
chore(release): 1.24.0 [skip ci]
2294356 
# [1.24.0](v1.23.0...v1.24.0) (2026-02-16)

### Bug Fixes

* dequeue some Woo styles from the theme ([#401](#401)) ([821f81c](821f81c))
* update single post template widths ([#407](#407)) ([a99b2cf](a99b2cf))

### Features

* Add My Account button block  ([#400](#400)) ([7c99f35](7c99f35))
* add My Account button block to all header patterns ([#404](#404)) ([d7b8b4a](d7b8b4a))
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Feb 16, 2026

🎉 This PR is included in version 1.24.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@thomasguillot thomasguillot thomasguillot approved these changes

Assignees

No one assigned

Labels

released on @alpha released [Status] Approved

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@laurelfulford @thomasguillot